import React from "react";
import { Button } from "antd";
import { useNavigate } from "react-router-dom";
import err_url from "@/asset/images/404.webp";
import styled from "styled-components";

const Error_Styled = styled.div`
  width: 100%;
  height: 100vh;

  .bg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img {
      max-width: 100%;
      height: auto;
    }
    p {
      margin-bottom: 15px;
    }
    .btn {
      margin-bottom: 200px;
    }
  }
`;

const Error = () => {
  let navigate = useNavigate();
  return (
    <Error_Styled>
      <div className="bg">
        <img src={err_url} alt="" />
        <p>抱歉，您访问的页面不存在。</p>
        <Button
          className="btn"
          onClick={() => {
            navigate("/", { replace: true });
          }}
        >
          返回首页
        </Button>
      </div>
    </Error_Styled>
  );
};

export default Error;
